<template>
  <div class="comment-batch-actions">
    <div class="batch-actions-bar">
      <el-button 
        type="danger" 
        :disabled="selectedComments.length === 0"
        @click="handleBatchDelete"
      >
        批量删除 ({{ selectedComments.length }})
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { batchDeleteComments } from '../../api/admin';

const props = defineProps({
  selectedComments: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['refresh']);

// 批量删除评论
const handleBatchDelete = async () => {
  if (props.selectedComments.length === 0) {
    return;
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${props.selectedComments.length} 条评论吗？此操作不可恢复！`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    const commentIds = props.selectedComments.map(comment => comment.id);
    const res = await batchDeleteComments(commentIds);
    
    if (res.code === 200) {
      ElMessage.success(res.message || `成功删除 ${res.data} 条评论`);
      emit('refresh');
    } else {
      ElMessage.error(res.message || '批量删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除评论失败:', error);
      ElMessage.error('批量删除操作失败');
    }
  }
};
</script>

<style scoped>
.comment-batch-actions {
  margin-bottom: 20px;
}

.batch-actions-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style> 